<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header :show-back-button="true"/>
    <main class="flex-1 p-6 overflow-hidden overflow-y-auto"> <!-- 修改这里，移除 overflow-y-auto -->
      <div class="container mx-auto h-full">
        <h2 class="page-title mb-6">{{ displayedTemplateName }} 流程图</h2>
        <div class="flowchart-wrapper">
          <div class="flowchart-container">
            <div ref="flowchartContainer" class="mermaid">
              <!-- Mermaid 图表将在这里渲染 -->
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import mermaid from 'mermaid'

const route = useRoute()
const flowchartContainer = ref(null)
const displayedTemplateName = ref('')

// 初始化 Mermaid
mermaid.initialize({
  startOnLoad: false,
  theme: 'default',
  securityLevel: 'loose',
  elk: {
    mergeEdges: true
  },
  flowchart: {
    useMaxWidth: false,  // 修改为 false，允许图表超出容器宽度
    htmlLabels: true,
    curve: 'basis',
    rankSpacing: 80,
    nodeSpacing: 100,  // 增加节点间的水平间距
    padding: 20
  }
})

// 渲染流程图
const renderFlowchart = async (templateKey) => {
  if (!flowchartContainer.value) return

  const flowchartDefinition = await getFlowchartDefinition(templateKey)
  if (!flowchartDefinition) {
    flowchartContainer.value.innerHTML = '未找到流程图定义'
    return
  }

  try {
    const {svg} = await mermaid.render('flowchart-svg', flowchartDefinition)
    flowchartContainer.value.innerHTML = svg
  } catch (error) {
    console.error('Mermaid rendering error:', error)
    flowchartContainer.value.innerHTML = '渲染流程图时出错'
  }
}

// 获取流程图定义
const getFlowchartDefinition = (templateKey) => {
  const definitions = {
    'WindingMachine': `
graph LR
    A[开始] --> B{安全门关闭?}
    B -- 是 --> C{气压正常?}
    B -- 否 --> A
    C -- 是 --> D[设备初始化]
    C -- 否 --> A
    D --> E[待机]
    E --> F{接收启动信号?}
    F -- 是 --> G[执行绕线]
    F -- 否 --> E
    G --> H[完成绕线]
    H --> I{接收停止信号?}
    I -- 是 --> J[停止]
    I -- 否 --> E
    J --> K[结束]`,

    'MarkingMachine': `
graph LR
    A[开始] --> B[打码机初始化]
    B --> C[等待打码信号]
    C --> D{收到打码信号?}
    D -- 是 --> E[执行打码]
    D -- 否 --> C
    E --> F[完成打码]
    F --> C`,

    'GenericScanSave': `
graph LR
    A[开始] --> B[等待扫码]
    B --> C{扫码成功?}
    C -- 是 --> D[保存数据]
    C -- 否 --> B
    D --> E[显示结果]
    E --> B`
  }
  return definitions[templateKey]
}

onMounted(async () => {
  const templateKey = route.params.template
  if (templateKey) {
    displayedTemplateName.value = {
      'WindingMachine': '绕线机',
      'MarkingMachine': '打码机',
      'GenericScanSave': '通用扫码保存'
    }[templateKey] || templateKey

    await renderFlowchart(templateKey)
  }
})
</script>

<style scoped>
.page-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.flowchart-wrapper {
  height: calc(100% - 4rem); /* 减去标题和边距的高度 */
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  overflow: auto; /* 使wrapper可滚动 */
}

.flowchart-container {
  padding: 2rem;
  min-width: max-content; /* 确保容器至少和内容一样宽 */
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.mermaid) {
  padding: 1rem;
  min-width: 1320px; /* 设置最小宽度 */
}

/* 确保 SVG 图表保持合适的大小 */
:deep(.mermaid svg) {
  min-width: 1320px;
  height: auto !important;
}

/* 自定义滚动条样式 */
.flowchart-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flowchart-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.flowchart-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.flowchart-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
